<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时数据</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="sidebar">
        <ul>
            <li><a href="/main">主页</a></li>
            <li><a href="/action">行为</a></li>
            <li><a href="/query">查询</a></li>
            <li><a href="/logout" class="logout">登出</a></li>
        </ul>
    </div>

    <div class="content">
        <h1>实时数据</h1>
        
        <div id="data-container">
            <p>序号: <span id="id">加载中...</span></p>
            <p>时间: <span id="time">加载中...</span></p>
            <p>温度: <span id="temperature">加载中...</span></p>
            <p>天气: <span id="weather">加载中...</span></p>
            <p>车速: <span id="speed">加载中...</span></p>
        </div>

        <script>
            function fetchLatestData() {
                fetch('/get_latest_sensor_data')
                    .then(response => response.json())
                    .then(data => {
                        if (data.error) {
                            document.getElementById('data-container').innerHTML = `<p>${data.error}</p>`;
                        } else {
                            document.getElementById('id').innerText = data.id;
                            document.getElementById('time').innerText = data.time;
                            document.getElementById('temperature').innerText = data.temperature;
                            document.getElementById('weather').innerText = data.weather;
                            document.getElementById('speed').innerText = data.speed;
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching latest data:', error);
                    });
            }

            // 每5秒刷新一次数据
            setInterval(fetchLatestData, 5000);
            
            // 页面加载时立即获取一次数据
            window.onload = fetchLatestData;
        </script>
    </div>
</body>
</html>
